<template>
    <view w-full>
        <view px-8 mt-8>
         <image src="https://7072-prod-0gdpyz637d16cecb-1336975851.tcb.qcloud.la/res/head.png" w-full  mt-4 h-500 mode="aspectFit"></image>
        </view>
        <view px-8 @click="emitAddTask('task_add')">
             <view class="main-btn">
                 <up-icon name="plus" color="white" size="40" center bold></up-icon>
             </view>
         </view>
         <view p-8 v-if="tasklist" >
            <w-tasklist-girl :tasklist="tasklist" min-h-80></w-tasklist-girl>
         </view>
         <view w-full v-else mt-20>
            <image src="https://7072-prod-0gdpyz637d16cecb-1336975851.tcb.qcloud.la/res/guide/1.png" w-full  mt-10 h-500 mode="aspectFit"></image>
            <up-line margin="60rpx 0"></up-line>
            <image src="https://7072-prod-0gdpyz637d16cecb-1336975851.tcb.qcloud.la/res/guide/2.png" w-full  mt-10 h-500 mode="aspectFit"></image>
            <up-line margin="60rpx 0"></up-line>
            <image src="https://7072-prod-0gdpyz637d16cecb-1336975851.tcb.qcloud.la/res/guide/3.png" w-full  mt-10 h-500 mode="aspectFit"></image>
            <up-line margin="60rpx 0"></up-line>
            <text center mt-10 text-gray>正确的使用方式</text>
            <image src="https://7072-prod-0gdpyz637d16cecb-1336975851.tcb.qcloud.la/res/guide/4.png" w-full  mt-10 h-500 mode="aspectFit"></image>
                        <up-line margin="60rpx 0"></up-line>
            <image src="https://7072-prod-0gdpyz637d16cecb-1336975851.tcb.qcloud.la/res/guide/5.png" w-full  mt-10 h-500 mode="aspectFit"></image>
                        <up-line margin="60rpx 0"></up-line>
            <image src="https://7072-prod-0gdpyz637d16cecb-1336975851.tcb.qcloud.la/res/guide/6.png" w-full  mt-10 h-500 mode="aspectFit"></image>
            <up-line margin="60rpx 0"></up-line>
            <text text-gray my-6 center>来发布一个任务吧</text>
             <view px-8 @click="emitAddTask('task_add')">
             <view class="main-btn" mb-10>
                 <up-icon name="plus" color="white" size="40" center bold></up-icon>
             </view>
             <view mt-10>
                <up-line></up-line>
             </view>
         </view>
        </view>
    </view>
	<view>
        <w-task-add :show="false" ref="addtask"/>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';  
import {onLoad} from '@dcloudio/uni-app'
import {apiGetTempTask,apiAddTask,apiWorkingTask} from "@/api/task"
import { TaskList } from '@/types/task';
   
  const tasklist = ref<TaskList|null>(null)
  var tasklist_id = 0;
  const addtask = ref(null)
  
onLoad(()=>{
    // #ifdef MP-WEIXIN
    wx.reportEvent("index", {})
    // #endif
    apiGetTempTask().then(res=>{
        if(res.id){
            tasklist_id = res.id
            tasklist.value = res
        }
    });
})

  const emitAddTask = (name: string) => {
    uni.$emit(name);
  }
</script>
<style lang="scss" scoped>
    .main-btn {
        padding: 10px 24px;
        border: none;
        border-radius: 26rpx;
        cursor: pointer;
        color: white;
        background: linear-gradient(
          45deg,
          #2196f3,
          #a039cf,
          #7b1cb9,
          #2196f3
        );
        background-size: 600% 600%;
        animation: gradientFlow 10s ease infinite;
        position: relative;
        overflow: hidden;
        text-align: center;
      }

      @keyframes gradientFlow {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
</style>